<template>
  <div v-loading="loading" class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="物料编码" prop="materialCode">
          <CodeRuleInput
            :band-value.sync="formData.materialCode"
            table-name="wms_material"
            column-name="material_code"
            :is-edit="true"
          />
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="formData.materialName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="formData.materialModel" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="物料单位" prop="materialUnitId">
          <DictSelect
            :band-value.sync="formData.materialUnitId"
            dict-type="materialUnitId"
          />
        </el-form-item>
        <el-form-item label="物料分类" class="clickChoose" prop="materialTypeName">
          <el-input v-model="formData.materialTypeName" placeholder="请选择" readonly />
          <a class="clickChoose_button" @click.prevent="chooseType">
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item label="物料属性">
          <DictSelect
            :band-value.sync="formData.descriptionId"
            dict-type="descriptionId"
          />
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="formData.weight" type="number" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="材质">
          <el-input v-model="formData.texture" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="品牌">
          <el-input v-model="formData.brand" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="保质期(天)" prop="qualityGuaranteePeriod">
          <el-input v-model="formData.qualityGuaranteePeriod" type="number" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="最小库存量" prop="minimumInventory">
          <el-input v-model="formData.minimumInventory" type="number" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="最大库存量" prop="maximumInventory">
          <el-input v-model="formData.maximumInventory" type="number" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <el-input
            v-if="!formData.planCode"
            v-model="formData.remark"
            maxlength="200"
            type="textarea"
            placeholder="请输入"
            show-word-limit
          />
        </el-form-item>
        <el-form-item v-if="isShow" label="状态">
          <el-switch
            v-model="formData.status"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999999"
          />
        </el-form-item>
        <el-form-item label="物料配图" class="double">
          <pictureUpload
            :file-names="formData.imgName"
            :file-real-names="formData.imgRealName"
            :file-urls="formData.imgUrl"
            :row-index="1"
            single-multiple="single"
            @fileName="setFileName"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import {
  addOrUpdate,
  getInfo, materialCopy
} from '@/api/warehouseManagement/materialInfo'
import chooseTypes from '../materialType/chooseType.vue'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    originId: {},
    defaultValue: {}
  },
  data() {
    const minimumInventory = (rule, value, callback) => {
      if (value) {
        this.$refs.form.clearValidate('maximumInventory')
        if (this.formData.maximumInventory && Number(this.formData.minimumInventory) > Number(this.formData.maximumInventory)) {
          callback(new Error('最小库存量不能大于最大库存数量'))
          return
        } else if (this.formData.maximumInventory && Number(this.formData.maximumInventory) == Number(this.formData.minimumInventory)) {
          callback(new Error('最大库存量不能等于最小库存数量'))
        } else if (!this.SETTINGS.reg_no_zero.test(this.formData.minimumInventory)) {
          callback(new Error('最小库存量填写不正确'))
          return
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const maximumInventory = (rule, value, callback) => {
      if (value) {
        this.$refs.form.clearValidate('minimumInventory')
        if (this.formData.minimumInventory && Number(this.formData.maximumInventory) < Number(this.formData.minimumInventory)) {
          callback(new Error('最大库存量不能小于最小库存数量'))
          return
        } else if (this.formData.minimumInventory && Number(this.formData.maximumInventory) == Number(this.formData.minimumInventory)) {
          callback(new Error('最大库存量不能等于最小库存数量'))
        } else if (!this.SETTINGS.reg_no_zero.test(this.formData.maximumInventory)) {
          callback(new Error('最大库存量填写不正确'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const qualityGuaranteePeriod = (rule, value, callback) => {
      if (value) {
        if (!this.SETTINGS.reg_integer.test(this.formData.qualityGuaranteePeriod)) {
          callback(new Error('保质期只能输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      loading: true,
      isShow: false,
      pageData: {
        pageNum: 1,
        pageSize: 9999,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      formData: {
        materialCode: '',
        materialName: '',
        materialModel: '',
        materialUnitId: '',
        materialTypeName: '',
        materialTypeId: '',
        descriptionId: '',
        weight: '',
        texture: '',
        brand: '',
        qualityGuaranteePeriod: '',
        minimumInventory: '',
        maximumInventory: '',
        remark: '',
        status: '1',
        imgUrl: '',
        imgRealName: '',
        imgName: '',
        // id: '',
        isSalePrice: '0',
        isPurchasePrice: '0',
        isEngineeringDocument: '0',
        isEngineeringBom: '0'
      },
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      listData: [],
      tableData: [],
      peopleList: [],
      rules: {
        materialCode: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        materialName: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' }
        ],
        materialUnitId: [
          { required: true, message: '物料单位不能为空', trigger: 'change' }
        ],
        materialTypeName: [
          { required: true, message: '物料分类不能为空', trigger: 'change' }
        ],
        minimumInventory: [
          { validator: minimumInventory, trigger: 'change' }
        ],
        maximumInventory: [
          { validator: maximumInventory, trigger: 'change' }
        ],
        qualityGuaranteePeriod: [
          { validator: qualityGuaranteePeriod, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // console.log('this.originId', this.originId)
    // 有id就是编辑
    this.getInfo()
    // this.formData.id = this.id
  },
  mounted() {
  },
  methods: {
    chooseType() {
      this.$layer.iframe({// 弹框
        content: {
          content: chooseTypes, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {}// props
        },
        area: ['880px', '700px'],
        title: '选择物料分类', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    showType(data) {
      this.formData.materialTypeName = data.name
      this.formData.materialTypeId = data.id
    },
    setFileName(...data) {
      this.formData.imgName = data[0]
      this.formData.imgRealName = data[1]
      this.formData.imgUrl = data[2]
    },
    getInfo() {
      materialCopy(this.originId).then((res) => {
        Object.keys(this.formData).forEach((key) => {
          // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.isShow = true
        this.loading = false
      })
    },
    // 提交
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addOrUpdate(this.formData).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.getList() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  padding-left: 20px;
  padding-bottom: 20px;
  font-size: 24px;
  width: 100%;
}
.numberComponents {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
  height: 15px;
}
.el-icon-remove {
  font-size: 25px;
  color: red;
  height: 100%;
  width: 100%;
  border: 0px;
  background-color: transparent;
}
/deep/ .el-form-item__content {
  margin-left: 0 !important;
}
/deep/ .el-form-item__label {
  text-align: right;
}
.expand_radio {
  /deep/ .el-form-item__content {
    text-align: left;
  }
}
.expand_container {
  .el-form-item {
    margin-bottom: 10px;
  }
  .expand_file {
    margin-bottom: 0px;
  }

  /deep/ .el-form-item__label {
    width: 130px !important;
  }
  /deep/ .el-form-item__content {
    width: 710px !important;
  }
}
.main_main {
  .form_padding {
    padding: 0 !important;
    /deep/ .el-form-item {
      margin-right: 0px;
    }
    /deep/ .el-form-item__label {
      width: 120px !important;
    }
    /deep/ .el-form-item__content {
      width: 270px;
    }
    .remark {
      /deep/ .el-form-item__content {
        width: 690px !important;
        height: 60px;
        overflow-y: auto;
      }
    }
  }
}
/deep/ .el-table th.el-table__cell > .cell {
  position: unset;
}
/**
 * 解决el-input设置类型为number时，中文输入法光标上移问题
 **/
/deep/.el-input__inner{
  line-height: 1px !important;
}

/**
 * 解决el-input设置类型为number时，去掉输入框后面上下箭头
 **/
/deep/ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
